<template>
	<div v-if="showStatus" class="page" :style="{'background': setData.bg_color,}">
		<view class="container">
			<view class="t_box">
				<view class="section_top" v-if="setData.show_winner && prizeText!=''">
					<uni-notice-bar background-color="rgba(0,0,0,0.5)" :show-icon="false" color="#fff"
						icon="info-filled" :speed="50" scrollable :text="prizeText" />
				</view>
				<view class="info_control">
					<div class="music" :style="{'background':openMusic?'rgba(0,0,0,.5)':'none'}">
						<MusicAutoPlay class="open" ref="audioCon" :music="setData.bgmusic" v-if="openMusic">
						</MusicAutoPlay>
					</div>
					<div class="complain" @click="next(1)">投诉</div>
				</view>
				<div class="btn_icon">
					<div class="share" @click="next(2)">
						<img src="~@/static/redpkg/share.png" alt="">
					</div>
					<div class="prize" @click="next(3)">
						<img src="~@/static/redpkg/prize.png" alt="">
					</div>
				</div>
			</view>
			<view class="header_box" v-if="setData.web_banner!=''">
				<image :src="setData.web_banner" mode="aspectFill"></image>
			</view>
			<view class="act_data">
				<view class="" v-if="setData.show_data">
					浏览量：{{activityText.view_num}}
				</view>
				<view class="" v-if="setData.show_data">
					参与数：{{activityText.play_num}}人
				</view>
			</view>
		</view>

		<view class="mid_banner">
			<image class="img" :src="setData.redpkg_main_image" mode="aspectFill"></image>
		</view>
		<view class="button_join" @click="startRedpkg">
			<image class="img" src="~@/static/redpkg/join.png" mode="aspectFill"></image>
		</view>
		<view class="join_nums">
			剩余{{chance}}次机会
		</view>
		<view style="margin:60rpx 0 -20rpx;" v-if="setData.service_open">
			<service></service>
		</view>
		<view style="margin-bottom: 41rpx;" class="info_rule">
			<view class="info" v-for="(item,index) in rules" :key="index">
				<div class="logo">

					<view class="title" :style="{'filter':'hue-rotate('+setData.content_bgcolor+'deg)'}">
						<span>{{item.title}}</span>
					</view>
					<!-- <div class="other" :style="{'filter':'hue-rotate('+setData.content_bgcolor+'deg)'}"></div> -->
				</div>

				<view>
					<view class="dec" v-html="item.content">{{item.content}}</view>
				</view>
			</view>
		</view>
		<div class="sports_swiper" v-if="bottom_ads.length!=0 &&setData.bottom_ad_open==true">
			<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :current="0">
				<swiper-item v-for="(item,index) in bottom_ads">
					<div class="swiper_content" @click="jumpNew(item.link)">
						<image v-if="checkType(item.image)=='image'" class="swiper_img" :mode="'scaleToFill'"
							:src="item.image"></image>
						<video class="swiper_video" v-if="checkType(item.image)=='video'" :src="item.image"
							:enable-progress-gesture="false" controls>
						</video>
					</div>
				</swiper-item>
			</swiper>
		</div>

		<view class="footer_name" v-if="setData.copyright!=''"
			:style="{padding:setData.vote_countdown || setData.vote_reg || setData.show_data?' 0 0 20rpx':'0'}">
			{{setData.copyright}}
		</view>

		<view class="getMoreTimes">
			<img :src="setData.task_float" @click="openTaskCenter" v-if="taskMenuData.length>0"></img>
		</view>

		<view class="modal_rule fadeIn_an" :style="{backgroundImage:'url('+setData.redpkg_bg_image+')'}"
			@touchmove.prevent v-if="modal">
			<div class="content" ref="draw_an_close" v-if="modalStatus==1">
				<redPkg :bagImg="setData.redpkg_item_image" :data="setData" :seconds="setData.redpkg_time_length" @finish="getPrize"></redPkg>
				<!-- <img class="close" @click="closeModal" src="../../../static/guess/close.png" alt="" /> -->
			</div>
			<div class="fadeIn" v-if="modalStatus==2">
				<div class="topimage"></div>
				<div class="prize_container">
					<view class="word" :style="{ 'background':'url('+lottData.prize.image+') center center no-repeat'}">
					</view>
					<view class="title">
						{{lottData.prize.title}}
					</view>
					<view class="btn_con">
						<view class="btn back" @click="next(4)">
							返回
						</view>
						<view class="btn" @click="next(5)">
							查看奖品
						</view>
					</view>

					<view class="close" @click="modalLott=false"> </view>
				</div>
			</div>
			<div class="prize_container c2 fadeIn" v-if="modalStatus==3">
				<view class="word"></view>
				<view class="title">
					很遗憾，您未中奖
				</view>
				<view class="btn_con">
						<view class="btn" @click="next(6)">
							再玩一次
						</view>
						<view class="btn back" @click="modal = false">
							关闭
						</view>
				</view>
				

				<view class="num">还可以玩<span>{{chance}}</span>次</view>
				<view class="close" @click="modalLott=false"> </view>
			</div>
		</view>

		<taskCenter ref="taskcenter" @backNums="getNum" :act_type="'drawlots'" :show="showTask" :topImage="setData"
			:list="taskMenuData" @close="handlerCloseTaskCenter" @finish="handlerTaskFinish"></taskCenter>
		<advertise :data="advSet" @close="closeAdv"></advertise>
		<share v-if="showShare" :data="data" @close="showShare=false"></share>
		<guide></guide>
		<collectPhone :data="data"></collectPhone>
		<help :data="setData" v-if="showHelpModal" @hideMissionModal="hideModal"></help>
	</div>
</template>

<script>
	import help from "../../../components/taskCenter/help";
	import watermarkOption from '@/until/water.js'
	import { ActivityInfo, chance, activityText, taskList, redpkgStart, redpkgFinish } from '@/api/api.js'
	import { LoginApp, checkLogin, getSystemInfo, isWeiXin, isQianfan, checkPlatform, proxyShareFun, newJumpUrl } from '@/until/QFH5.js'
	import { mapGetters } from "vuex";
	import * as frameJs from '@/model/frameData'
	export default {
		components: {
			help
		},
		computed: {
			...mapGetters(['guide'])
		},
		data() {
			return {
				showStatus: false,
				loginStatus: false,
				actid: '',
				pageStatus: 0,
				activityText: {},
				chance: 0,
				data: {},
				advSet: {},
				setData: {},
				rules: [],
				bottom_ads: [],
				openMusic: false,
				showTask: false, //任务中心
				taskMenuData: [], //任务中心菜单
				showShare: false, //分享
				showHelpModal: false,
				modal: false,//false
				modalStatus: 1,//1
				prizeText: '',
				isframe: false,
				frameData: {},
				drawSocks: false,
				lottData: {
					prize: {
						id: 384,
						image: "https://qiance.qianfanyun.com/api/20250110105316front0_2_0_FjSLogyPC7VWBqpvJ44sIgIzmO4L.png",
						redid: 0,
						title: "1111",
						type: 1,
					},
					ret: 1,
				},
			}
		},
		methods: {
			jumpNew(url){
			  if('' == url || undefined == url){
			    return;
			  }else{
			    window.open(url)
			  }
			
			},
			getPrize(val) {
				redpkgFinish({
					actid: this.actid,
					hit_count: val
				}).then(res => {
					if (res.code == 0) {
						this.lottData = res.data
						this.modalStatus = res.data.ret == 1 ? 2 : 3
					}else{
						this.modalStatus = 3
					}
				})

				// redpkgFinish() 
			},
			initWorksChance() {
				chance({
					actid: this.actid
				}).then(res => {
					this.chance = res.data.num
				})
			},
			startRedpkg() {
				let callback = () => {
					if (this.chance <= 0) {
						let str = this.activityText.has_task ? '机会用完了,做任务获取更多机会' : '机会用完了'
						uni.showToast({
							icon: 'none',
							title: str
						})
						if (this.activityText.has_task) {
							this.showTask = true
							this.$refs['taskcenter'].getCard()
						}
						return
					}
					redpkgStart({ actid: this.actid, query: 'redpkg' }).then(res => {
						let _t = this
						setTimeout(()=>{
							_t.chance = res.data.num
						},800)
						this.modal = true
						this.modalStatus = 1
					})
				}
				this.getAuth(callback)
			},


			closeModal() {
				this.modal = false
			},
			next(val) {
				if (val == 1) { //投诉
					let callback = () => {
						this.$navigateTo({
							url: '/plugin/pages/complain?id=' + this.actid + '&type=' + this.type +
								'&plugin=' + this.$route.query.plugin
						})
					}
					this.getAuth(callback)
				} else if (val == 2) { //分享
					this.showShare = true
				} else if (val == 3) { //我的奖品
					let callback = () => {
						let url = '/plugin/pages/redpkg/prize?id=' + this.actid + '&plugin=redpkg'
						this.$navigateTo({
							url: url
						})
					}
					this.getAuth(callback)
				} else if (val == 4) {
					this.modal = false
					this.modalStatus = 1
				} else if (val == 5) {
					let url = '/plugin/pages/redpkg/prize?id=' + this.actid + '&plugin=redpkg'
					this.$navigateTo({
						url: url
					})
				} else if (val == 6) {
					if(this.chance>0){
						redpkgStart({ actid: this.actid, query: 'redpkg' }).then(res => {
							let _t = this
							setTimeout(()=>{
								_t.chance = res.data.num
							},800)
							this.modalStatus = 1
						})
					}else{
						this.modal = false
						uni.showToast({
							title: '没有次数了哦',
							icon: 'none'
						})
					}
						
				}
			},
			//关闭广告
			closeAdv() {
				this.advSet.start_ad_show = false
				this.advSet.popup_ad_show = false
			},
			//隐藏
			hideModal() {
				this.showHelpModal = false
			},
			getNum(val) {
				this.chance = val
			},
			openTaskCenter() {
				let callback = () => {
					this.showTask = !this.showTask
					this.$refs['taskcenter'].getCard()
				}
				this.getAuth(callback)
			},
			handlerCloseTaskCenter() {
				this.showTask = false
				this.initTask()

			},
			initTask() {
				taskList({
					actid: this.actid
				}).then(res => {
					this.taskMenuData = res.data
				})
			},
			handlerTaskFinish() {
				this.initTask()
			},
			login() {
				if (this.checkPlat()) {
					LoginApp(this.actid)
				}
			},
			//检查平台
			checkPlat() {
				let plat = checkPlatform()
				if (!plat) {
					this.$store.dispatch('setGuideShow', 4)
				}
				return plat
			},
			getAuth(callback = () => {}, back = () => {}, isNeglect = false) {
				let {
					isWechat,
					phone
				} = this.guide
				if (this.checkPlat()) {
					if (!isNeglect && this.pageStatus == 0) {
						uni.showToast({
							title: '活动还没开始呢',
							icon: 'none'
						})
						return
					}
					if (!isNeglect && this.pageStatus == 1) {
						uni.showToast({
							title: '活动已经结束了',
							icon: 'none'
						})
						return
					}
					if (!this.loginStatus) {
						this.login()
						return
					}

					//收集信息
					if (this.data.collect == 1 && this.showCollectPhone == '' && isWeiXin()) {
						this.$store.commit('SET_SHOWCOLLECT', true)
						return
					}
					if (isQianfan()) {
						if (!isWechat) {
							this.$store.dispatch('setGuideShow', 1)
							back()
							return
						}
						if (phone == "") {
							this.$store.dispatch('setGuideShow', 2)
							if (this.guaStatus) {
								this.resetGua()
								this.guaStatus = false
							}
							return
						}
						callback()
					} else {
						callback()
					}
				}
			},
			async init() {
				let res = null
				let nowTime = Math.floor(new Date() / 1000)
				if (!this.isframe) {
					res = await ActivityInfo({
						actid: this.actid
					})
				} else {
					res = this.frameData
				}
				if (res.code == 0) {
					// #ifdef H5
					if (res.data.status == 0) {
						watermarkOption.set('活动未发布')
					}
					// #endif
					this.$setTitle(res.data.title)
					uni.setStorageSync('title', res.data.title)
					uni.setStorageSync(this.actid + 'ActivityData', JSON.stringify(res.data))
					this.data = res.data
					let _this = this
					this.$nextTick(() => {
						let token = localStorage.getItem(_this.actid + 'bearerToken') || null
						if (token != null && _this.$store.state.long == 0 && _this.$store.state.lat == 0 &&
							_this.data.area && _this.data.area.type == 3) {
							_this.$store.dispatch('getPos')
							window.getLocationCallBackFun = () => {}
						}
					})
					uni.setStorageSync('collectData', res.data)
					let {
						settings
					} = res.data
					uni.setStorageSync('platform', JSON.stringify(settings.platform))
					this.setData = settings
					this.advSet = settings
					this.bottom_ads = settings.bottom_ads
					//规则排序
					this.rules = []
					settings.sort.forEach(item => {
						if (res.data[item]) {
							let obj = {
								title: this.formartText(item),
								content: res.data[item]
							}
							this.rules.push(obj)
						}
					})
					// this.gType = settings.guess_bg
					if (settings.layer_banner != '') {
						this.pageStatus = 3
					}
					this.$store.dispatch('serviceInfo', settings)
				}
				if (nowTime < res.data.start_time) {
					this.pageStatus = 0
					this.times = res.data.start_time
					// this.startTime()
				} else if (nowTime > res.data.expire_time) {
					this.pageStatus = 1
				}
				this.openMusic = res.data.settings.open_music
				this.$nextTick(() => {
					let data = res.data
					proxyShareFun(data.settings.title, data.settings.image, data.settings.desc, window.location
						.href)
				})
			},
			//获取动态文本
			getActivity() {
				// console.log('发起请求',this.actid)
				activityText({
					actid: this.actid
				}).then(res => {
					if (res.code == 0) {
						this.activityText = res.data
						this.prizeText = ''
						res.data.winners.map(item => {
							this.prizeText += item.message + ' '
						})
						let _this = this
						this.showStatus = true
						if (res.data.has_task && this.taskMenuData.length == 0) {
							this.initTask()
						}
						this.$nextTick(() => {
							this.$refs['taskcenter'].getCard()
						})
					}
				})
			},
			checkType(val) {
				return this.$checkType(val)
			},
			formartText(val){
				let {business_intro,activity_rules,prize_intro} = this.setData.custom_desc_key
				switch(val){
					case 'business_intro':return business_intro!=''?business_intro:'商家介绍'
					case 'activity_rules':return activity_rules!=''?activity_rules:'活动规则'
					case 'prize_intro':return prize_intro!=''?prize_intro:'奖品介绍'
				}
			},
			formatImage(host, val) {
				return host + val
			},
			setIframeData() {

				let _this = this
				window.addEventListener('message', function(e) {
					console.log('接受到了', e.data)
					let data = e.data
					_this.actid = data.slug
					// return
					//强制兼容后台数据
					_this.frameData = {
						code: 0,
						data: data
					}
					let {
						settings
					} = data
					_this.activityText = {
						view_num: settings.view_num || 0,
						play_num: settings.play_num || 0,
					}
					let {
						popup
					} = data
					switch (popup) {
						case "task_popup":
							_this.taskMenuData = frameJs.taskMenuData
							_this.showTask = true
							break;
						case "closetask_popup":
							_this.showTask = false
							break;
						default:
							break;
					}
					_this.prizeText = '恭喜张三获得奖品一个 恭喜李四获得奖品一个 恭喜王五获得美团红包'
					_this.init()
					_this.showStatus = true
				})
			}
		},
		async mounted() {
			this.loginStatus = await checkLogin()
			if (!this.isframe) {
				if (this.loginStatus) {
					this.initWorksChance()
				}
				this.init()
				this.getActivity()
			} else {
				this.setIframeData()
			}
			let code = uni.getStorageSync(this.actid + 'Invite') || 0
			if (code != 0) {
				this.showHelpModal = true
			}

		},
		created() {
			this.actid = uni.getStorageSync('actid')
			this.$store.commit('SETACTIVITYNAME', 'redpkg')
			let web = uni.getStorageSync('WEB') || null
			if (web) {
				this.isframe = true
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "./redpkg.scss";
</style>